<template>
  <div class="flex justify-between" v-show="showGuide">
    <div>
      <span class="ft-14">推广关键词:</span>
      <ForbiddenText :category="type" />
    </div>
    <UserGuide />
  </div>
  <div class="w-full">
    <a-textarea :auto-size="{ minRows: 7, maxRows: 7 }" v-model:value="keyword" :placeholder="keywordPlaceholder" />
    <div class="text-right mt-5" id="bw-searcher-btn"></div>
  </div>
  <!--<a-alert type="success">
    <template #message>
      1.近日百度流量接口出现不稳定情况，导致前端查价出现报错或者不出现推荐关键词的情况，技术已经紧急处理，预计2-3个工作日；<br />
      2.遇到此种情况可以尝试多次点击“查询”触发接口，一般3-5次可以出查询结果。给您带来的不便还请谅解。
    </template>
  </a-alert>-->
  <div class="text-right mt-5">
    <a-button type="primary" :loading="submitting" @click="emit('submit')">点击查价</a-button>
    <a-button class="ml-2" @click="emit('reset')">重置</a-button>
  </div>
</template>

<script setup lang="ts">
import { keywordPlaceholder } from '@/shared/text'
import ForbiddenText from '@/views/price-sheet/components/ForbiddenText.vue'
import UserGuide from '@/views/price-sheet/components/UserGuide.vue'
import type { ProductEnum } from '@/core/enums/platform'
import { useVModel } from '@vueuse/core'

interface Props {
  submitting: boolean
  text: string
  type: ProductEnum
  showGuide?: boolean
}

interface Emits {
  (e: 'submit'): void
  (e: 'reset'): void
}

defineOptions({
  name: 'BwTextarea'
})

const props = withDefaults(defineProps<Props>(), {
  showGuide: true
})
const emit = defineEmits<Emits>()
const keyword = useVModel(props, 'text')
</script>
